<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信贷评分预测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        light: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 页面标题 -->
        <header class="text-center mb-12 pt-6">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-2">
                <i class="fa fa-line-chart text-primary mr-3"></i>信贷评分预测系统
            </h1>
            <p class="text-gray-600 text-lg">基于机器学习的个人信用评分预测工具</p>
        </header>

        <!-- 登录区域 -->
        <section id="login-section" class="max-w-md mx-auto bg-white rounded-2xl p-8 card-shadow transform transition-all duration-500">
            <h2 class="text-2xl font-bold text-center mb-6 text-dark">用户登录</h2>
            
            <form id="login-form" class="space-y-5">
                <div>
                    <label for="user_id" class="block text-gray-700 font-medium mb-2">
                        <i class="fa fa-user text-primary mr-2"></i>用户ID
                    </label>
                    <input type="text" id="user_id" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 input-focus"
                        placeholder="请输入用户ID（中文名拼音）" required>
                </div>
                
                <div>
                    <label for="password" class="block text-gray-700 font-medium mb-2">
                        <i class="fa fa-lock text-primary mr-2"></i>密码
                    </label>
                    <input type="password" id="password" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 input-focus"
                        placeholder="请输入密码（英语+数字）" required>
                </div>
                
                <button type="submit" 
                    class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg btn-hover flex items-center justify-center">
                    <i class="fa fa-sign-in mr-2"></i>登录
                </button>
            </form>
            
            <div id="login-error" class="mt-4 text-center text-red-500 hidden">
                <i class="fa fa-exclamation-circle mr-1"></i>用户ID或密码错误
            </div>
        </section>

        <!-- 预测区域 (默认隐藏) -->
        <section id="prediction-section" class="hidden transform transition-all duration-500">
            <!-- 用户信息栏 -->
            <div class="bg-white rounded-xl p-4 mb-6 card-shadow flex justify-between items-center">
                <div class="flex items-center">
                    <i class="fa fa-user-circle text-primary text-2xl mr-3"></i>
                    <span id="user-display" class="font-medium text-gray-700"></span>
                </div>
                <button id="logout-btn" class="text-primary hover:text-primary/80 font-medium flex items-center btn-hover">
                    <i class="fa fa-sign-out mr-1"></i> 退出登录
                </button>
            </div>
            
            <!-- 预测表单卡片 -->
            <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow mb-6">
                <h2 class="text-2xl font-bold mb-6 text-dark">
                    <i class="fa fa-pencil-square-o text-primary mr-2"></i>输入特征数据
                </h2>
                
                <form id="prediction-form" class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">特征名称</th>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">输入值</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">SeriousDlqin2yrs</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="SeriousDlqin2yrs" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">RevolvingUtilizationOfUnsecuredLines</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="RevolvingUtilizationOfUnsecuredLines" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">age</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="age" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">NumberOfTime30-59DaysPastDueNotWorse</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="NumberOfTime30-59DaysPastDueNotWorse" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">DebtRatio</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="DebtRatio" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">MonthlyIncome</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="MonthlyIncome" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">NumberOfOpenCreditLinesAndLoans</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="NumberOfOpenCreditLinesAndLoans" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">NumberOfTimes90DaysLate</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="NumberOfTimes90DaysLate" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">NumberRealEstateLoansOrLines</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="NumberRealEstateLoansOrLines" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">NumberOfTime60-89DaysPastDueNotWorse</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="NumberOfTime60-89DaysPastDueNotWorse" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-700">NumberOfDependents</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="number" step="any" name="NumberOfDependents" min="0"
                                        placeholder="≥0"
                                        class="w-full px-3 py-2 rounded border border-gray-300 input-focus" required>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="mt-8 text-center">
                        <button type="submit" 
                            class="bg-secondary text-white font-bold py-3 px-8 rounded-lg btn-hover inline-flex items-center">
                            <i class="fa fa-calculator mr-2"></i>预测Credit_Score
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- 预测结果区域 -->
            <div id="result-section" class="hidden bg-white rounded-2xl p-6 md:p-8 card-shadow">
                <h2 class="text-2xl font-bold mb-4 text-dark">
                    <i class="fa fa-bar-chart text-primary mr-2"></i>预测结果
                </h2>
                <div class="border-t border-gray-200 pt-4">
                    <div id="prediction-result" class="text-xl text-center py-6 px-4 rounded-lg bg-gray-50">
                        <!-- 预测结果将在这里显示 -->
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="mt-12 py-6 text-center text-gray-500 text-sm">
        <p>© 2023 信贷评分预测系统 | 基于机器学习的信用评估工具</p>
    </footer>

    <script>
        // 获取DOM元素（修正用户名相关ID）
        const loginSection = document.getElementById('login-section');
        const predictionSection = document.getElementById('prediction-section');
        const loginForm = document.getElementById('login-form');
        const predictionForm = document.getElementById('prediction-form');
        const loginError = document.getElementById('login-error');
        const userDisplay = document.getElementById('user-display');
        const logoutBtn = document.getElementById('logout-btn');
        const resultSection = document.getElementById('result-section');
        const predictionResult = document.getElementById('prediction-result');
        
        // 登录表单提交处理（替换为user_id）
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据（改用user_id）
            const user_id = document.getElementById('user_id').value;
            const password = document.getElementById('password').value;
            
            // 向后端发送登录请求（参数改为user_id）
            fetch('http://127.0.0.1:5001/api/login', {  
                method: 'POST',  
                headers: {
                    'Content-Type': 'application/json',  
                },
                body: JSON.stringify({  
                    user_id: user_id,  // 关键修改：字段名统一为user_id
                    password: password
                })
            })
            // 接收后端响应并转JSON
            .then(response => response.json())
            // 处理后端返回结果
            .then(result => {
                if (result.status === 'success') {
                    // 隐藏登录区，显示预测区
                    loginError.classList.add('hidden');
                    loginSection.classList.add('opacity-0', 'scale-95');
                    setTimeout(() => {
                        loginSection.classList.add('hidden');
                        predictionSection.classList.remove('hidden');
                        setTimeout(() => {
                            predictionSection.classList.add('opacity-100', 'scale-100');
                        }, 50);
                    }, 300);
                    
                    // 显示后端返回的用户ID
                    userDisplay.textContent = `欢迎，${result.user_id}`;
                    
                    // 清空表单
                    loginForm.reset();
                } else {
                    // 显示后端返回的错误信息
                    loginError.textContent = `\uF06A ${result.message}`;
                    loginError.classList.remove('hidden');
                    loginError.classList.add('animate-pulse');
                    setTimeout(() => {
                        loginError.classList.remove('animate-pulse');
                    }, 1000);
                }
            })
            // 捕获请求链错误
            .catch(error => {
                loginError.textContent = '\uF06A 网络错误，请检查后端是否启动';
                loginError.classList.remove('hidden');
                loginError.classList.add('animate-pulse');
                setTimeout(() => {
                    loginError.classList.remove('animate-pulse');
                }, 1000);
                console.log('登录请求错误：', error);
            });
        });
        
        // 退出登录处理（正确，无需修改）
        logoutBtn.addEventListener('click', function() {
            predictionSection.classList.remove('opacity-100', 'scale-100');
            predictionSection.classList.add('opacity-0', 'scale-95');
            setTimeout(() => {
                predictionSection.classList.add('hidden');
                resultSection.classList.add('hidden');
                loginSection.classList.remove('hidden');
                setTimeout(() => {
                    loginSection.classList.remove('opacity-0', 'scale-95');
                }, 50);
            }, 300);
        });
        
        // 预测表单提交处理（正确，无需修改）
        predictionForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(predictionForm);
            const features = {};
            
            formData.forEach((value, key) => {
                features[key] = parseFloat(value);
            });
            
            // 显示加载状态
            predictionResult.innerHTML = '<div class="flex justify-center items-center"><i class="fa fa-circle-o-notch fa-spin text-primary text-3xl"></i></div>';
            resultSection.classList.remove('hidden');
            resultSection.classList.add('animate-fadeIn');
            
            // 向后端发送预测请求
            fetch('http://127.0.0.1:5001/api/predict', {  
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(features)
            })
            // 接收后端结果
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success') {
                    predictionResult.innerHTML = `
                        <div class="mb-4">
                            <span class="text-gray-600">预测的信用评分为：</span>
                            <span class="text-4xl font-bold ${result.colorClass} ml-2">${result.credit_score}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">信用等级：</span>
                            <span class="text-2xl font-semibold ${result.colorClass} ml-2">${result.rating}</span>
                        </div>
                        <div class="mt-6 pt-4 border-t border-gray-200">
                            <p class="text-gray-500 text-sm">注：该结果基于机器学习模型预测，仅供参考</p>
                        </div>
                    `;
                } else {
                    predictionResult.innerHTML = `
                        <div class="text-red-500 flex items-center justify-center">
                            <i class="fa fa-exclamation-circle mr-2"></i>
                            ${result.message || '预测失败，请检查输入数据'}
                        </div>
                    `;
                }
            })
            .catch(error => {
                predictionResult.innerHTML = `
                    <div class="text-red-500 flex items-center justify-center">
                        <i class="fa fa-exclamation-circle mr-2"></i>
                        网络错误或后端异常，请检查后端是否正常运行
                    </div>
                `;
                console.log('预测请求错误：', error);
            });
        });
    </script>
</body>
</html>